<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>1-4 window对象</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
    <h1>1-4 window对象</h1>

    <h3>window</h3>
    <div class="content">
        <P>BOM = Browser Object Model，浏览器对象模型</P>
        <p>所有的浏览器都支持window对象，所有js全局变量是window的属性，所有js全局函数是window的方法，
            <br>甚至 HTML DOM 的 document 也是 window 对象的属性之一
            <br><code>window.document.getElementById("header");</code>等同于<code>document.getElementById("header")</code>
        </p>
        <p>获取所有浏览器窗口尺寸（不包括工具栏和滚动条）的通用方法：
            <button class="btn btn-primary btn-sm form-inline" onclick="testWindowWH()">试一试</button>
        <pre>
        其中第一种是现代通用的，后面两种是照顾IE5,6,7,8的：
            var w=window.innerWidth
            || document.documentElement.clientWidth
            || document.body.clientWidth;

            var h=window.innerHeight
            || document.documentElement.clientHeight
            || document.body.clientHeight;
    </pre>
        <div class="alert alert-danger well-sm">以上方法不要直接写在拼字符串中，因为某些方法的不识别会导致js停止解析而拼不上后面的字符串！</div>
    </div>

    <h3>window.screen对象</h3>
    <div class="content">
        <p>window.screen对象可以获取用户屏幕的相关信息，跟浏览器窗口没关系</p>
        <p><code>screen.availWidth</code>可用的屏幕宽度
            <button class="btn btn-primary btn-sm form-inline" onclick="alert(screen.availWidth)">试一试</button>
        </p>
        <p><code>screen.availHeight</code>可用的屏幕高度
            <button class="btn btn-primary btn-sm form-inline" onclick="alert(screen.availHeight)">试一试</button>
        </p>
        <div class="alert alert-danger well-sm">发现<code>screen.availHeight</code>获取的屏幕高度并不是实际上的1080，而是1040，让任务栏隐藏了也还这样，不知什么原因！
        </div>
    </div>

    <h3>window.location对象</h3>
    <div class="content">
        <p>window.location对象可获取用户当前页面和服务器的相关信息</p>
        <p><code>location.hostname</code> web主机的域名
            <button class="btn btn-primary btn-sm form-inline" onclick="alert(location.hostname)">试一试</button>
        </p>
        <p><code>location.pathname</code> 页面路径和文件名
            <button class="btn btn-primary btn-sm form-inline" onclick="alert(location.pathname)">试一试</button>
        </p>
        <p><code>location.port</code> 主机的端口号
            <button class="btn btn-primary btn-sm form-inline" onclick="alert(location.port)">试一试</button>
        </p>
        <p><code>location.protocol</code> 所使用的web协议（http:// 或 https://）
            <button class="btn btn-primary btn-sm form-inline" onclick="alert(location.protocol)">试一试</button>
        </p>
        <p><code>location.href</code> 页面的url路径
            <button class="btn btn-primary btn-sm form-inline" onclick="alert(location.href)">试一试</button>
        </p>
        <p><code>location.assign(url)</code> 页面加载一个新的文档（如果写在iframe内部的话，就在此iframe中加载）
            <button class="btn btn-primary btn-sm form-inline" onclick="location.assign('http://e-art.taobao.com')">
                试一试
            </button>
        </p>
        <div class="alert alert-danger well-sm">以上测试在服务器上打开和直接打开html文件所得到的结果会有不同！</div>
    </div>
    <h3>window.history 浏览器的历史</h3>
    <div class="content">
        <p>为了保护用户隐私，对js访问该对象的方法做出了限制。</p>
        <p><code>history.back()</code> 等同于后退按钮
            <button class="btn btn-primary btn-sm form-inline" onclick="history.back()">
                试一试
            </button>
        </p>
        <p><code>history.forward()</code> 等同于前进按钮
            <button class="btn btn-primary btn-sm form-inline" onclick="history.forward()">
                试一试
            </button>
        </p>
    </div>
    <h3>window.navigate 用户浏览器的信息</h3>
    <div class="content">
        <p>来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：
            <br>1，navigator 数据可被浏览器使用者更改,
            <br>2，浏览器无法报告晚于浏览器发布的新操作系统
        </p>
        <p>常用的navigate属性如下：
            <button class="btn btn-primary btn-sm form-inline" onclick="testNavigate()">
                试一试
            </button>
            <pre>
        str += "window.navigator-----------------------------";
        str += "浏览器名称为："+navigator.appName+"";
        str += "浏览器版本为："+navigator.appVersion+"";
        str += "浏览器的代码名称为："+navigator.appCodeName+"";
        str += "用户代理标识为："+navigator.userAgent+"";
        str += "可以使用的mine类型信息为："+navigator.mineTypes+"";
        str += "可以使用的插件信息为："+navigator.plugins+"";
        str += "语言设定为："+navigator.languages+"";
        str += "window对象的属性--------------------------------";
        str += "window.document："+window.document+"";
        str += "window.location："+window.location+"";
        str += "window.history："+window.history+"";
        str += "window.closed："+window.closed+"";
        str += "window.opener："+window.opener+"";
        str += "window.self："+window.self+"";
        str += "window.top："+window.top+"";
        str += "window.parent："+window.parent+"";
        str += "window.frames："+window.frames+"";
        str += "window.length："+window.length+"";
        str += "window.offscreenBuffering："+window.offscreenBuffering+"";
            </pre>
            <div class="navigateContent"></div>
        <div class="alert alert-danger well-sm">所有浏览器的<code>navigator.appCodeName</code>都是Mozilla</div>
    </div>

    <h3>JS的消息框</h3>
    <div class="content">
        <p><code>confirm("text")</code>用于弹出选择框
            <button class="btn btn-primary btn-sm form-inline" onclick="testConfirm ()">
                试一试
            </button>
        </p>
        <p><code>prompt("提示语：", "默认值")</code>用于弹出输入框
            <button class="btn btn-primary btn-sm form-inline" onclick="testPrompt() ()">
                试一试
            </button>
            <div class="promptContent"></div>
        </p>
    </div>
</div>
<script src="js/jquery-2.2.4.js"></script>
<script src="js/main.js"></script>


<script>
    function testWindowWH() {
        var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        alert('浏览器窗口宽度：' + w + '，高度：' + h);
    }
    function testNavigate() {
        var str = "";
        str += "window.navigator-----------------------------<br>";
        str += "浏览器名称为："+navigator.appName+"<br>";
        str += "浏览器版本为："+navigator.appVersion+"<br>";
        str += "浏览器的代码名称为："+navigator.appCodeName+"<br>";
        str += "用户代理标识为："+navigator.userAgent+"<br>";
        str += "可以使用的mine类型信息为："+navigator.mineTypes+"<br>";
        str += "可以使用的插件信息为："+navigator.plugins+"<br>";
        str += "语言设定为："+navigator.languages+"<br><br>";
        str += "window对象的属性--------------------------------<br>";
        str += "window.document："+window.document+"<br>";
        str += "window.location："+window.location+"<br>";
        str += "window.history："+window.history+"<br>";
        str += "window.closed："+window.closed+"<br>";
        str += "window.opener："+window.opener+"<br>";
        str += "window.self："+window.self+"<br>";
        str += "window.top："+window.top+"<br>";
        str += "window.parent："+window.parent+"<br>";
        str += "window.frames："+window.frames+"<br>";
        str += "window.length："+window.length+"<br>";
        str += "window.offscreenBuffering："+window.offscreenBuffering+"<br>";
        $(".navigateContent").html(str);
    }
    function testConfirm() {
        var r = confirm('请选择确认或取消');
        if(r){
            alert( '您点击了确定');
        }else {
            alert( '您点击了取消');
        }
    }
    function testPrompt() {
        var name = prompt("请输入名字：","爱因斯坦");
        if(name !=null && name!=""){
            $(".promptContent").text(name + ", 欢迎回来！") ;
        }
    }
</script>
</body>
</html>












